<template>
  <div class="box">
    <div class="container product-detail">
      <el-breadcrumb separator="/" class="breadcrumb">
        <el-breadcrumb-item>
          <NuxtLink :to="{ path: '/' }">
            {{$t('header.top.nav_list.home')}}
          </NuxtLink>
        </el-breadcrumb-item>
        <el-breadcrumb-item>{{ newsDetail.title }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--分类-->

    <!-- 详情-->
    <div class="product-box">

      <!-- <div class="tab">
        <span :class="{on:tab === 1}" @click="cutTab(1)">{{$t('product.details')}}</span>
      </div> -->
      <div class="detail-box">
        <div class="news-box">
          <h3 style="text-align: center;padding-top: 10px;font-size: 26px;">{{ newsDetail.title }}</h3>
          <el-divider></el-divider>
          <div class="times"><img
              src="" />时间：{{ newsDetail.created_at }}
          </div>
          <div class="container" v-loading="tabLoading">
            <div v-if="tab === 1" v-html="newsDetail.content"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- <el-divider></el-divider> -->
  </div>
</template>


<script>
import { getNewsDetail } from '@/api/good'
import sku from '@/components/Sku'
import VueVideo from '@/components/VueVideo'
import 'video.js/dist/video-js.css'
export default {
  components: {
    sku,
    VueVideo
  },
  data() {
    return {
      tab: 1,
      inventoryFlag: true, //true有货; false 无货
      tabLoading: false,
      newsDetail: {
        title: '',
        content: ''
      },
      specificationDefaultDisplay: {},
      resources_many: [],
      resources_many_img: [],
      collect: 0,
      poster: '',
      categoryList: []
    }
  },
  async asyncData(ctx) {
    try {
      const { params } = ctx;

      let [goodDetailData] = await Promise.all([
        getNewsDetail(params.id),
      ]);
      // console.log("🚀 ~  goodDetailData: ", goodDetailData)

      return {

        newsDetail: goodDetailData,

      }
    } catch (err) {
      ctx.$errorHandler(err)
    }
  },
  head() {
    return {
      title: this.newsDetail.title + '-' + process.env.APP_NAME,
      meta: [
        { hid: 'index', name: this.newsDetail.title + '-' + process.env.APP_NAME, content: this.newsDetail.keywords ? this.newsDetail.keywords : process.env.APP_KEYWORD },
        { hid: 'description', name: 'description', content: this.newsDetail.short_description ? this.newsDetail.short_description : process.env.APP_DESCRIPTION },
        { hid: 'keywords', name: 'keywords', content: this.newsDetail.keywords ? this.newsDetail.keywords : process.env.APP_KEYWORD }
      ]
    }
  },
  mounted() {
    // if ($nuxt.$store.state.hasLogin) {
    //   this.getCollect()
    // }
  },
  methods: {

  }
}

</script>


<style lang='scss' scoped>
.product-detail-on .el-icon-star-off {
  color: #fa524c;
}
.box {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #dcdfe6;
  background-color: #ffffff;
}
.news-box {
  width: 1200px;
  margin: 10px auto;
  background-color: #fff;
  box-sizing: border-box;
  padding: 10px;
  min-height: 2.08rem;
  .times {
    display: flex;
    align-items: center;
    color: #757575;
  }
}
.product-box {
  .tab {
    text-align: center;
    padding: 10px 0 20px 0;
    span {
      padding: 0 20px 0 20px;
      color: #757575;
      cursor: pointer;
    }
    .on {
      color: #fa524c;
      font-size: 15px;
      font-weight: bold;
    }
  }
  .detail-box {
    background-color: #f4f4f4;
    padding: 10px 0;
    .container {
      text-align: center;
      overflow: hidden;
      img {
        display: block;
        margin: 0 auto;
      }
    }
  }
}
.product-detail {
  .breadcrumb {
    padding: 20px 0 20px 0;
  }
  .product-box {
    display: flex;
    .picture {
      width: 460px;
      margin-right: 20px;
      .image {
        width: 100%;
      }
    }
    .parameter {
      flex: 1;
      .title {
        font-size: 24px;
        font-weight: 400;
        color: #212121;
        display: flex;
        justify-content: space-between;
        &-price {
          border: 1px solid red;
          color: red;
          // margin-left: 100px;
          padding: 0 10px;
          border-radius: 4px;
          font-weight: 100;
          font-size: 16px;
          display: flex;
          align-items: center;
        }
      }
      .description {
        color: #b0b0b0;
        margin: 0;
        padding-top: 8px;
        line-height: 1.5;
      }
      .price-box {
        display: flex;
        padding-top: 8px;
        .price {
          font-size: 28px;
          color: #fa524c;
          .symbol {
            font-size: 14px;
          }
        }
        .m-price {
          position: relative;
          top: 3px;
          font-size: 14px;
          margin-left: 5px;
          color: #b0b0b0;
          text-decoration: line-through;
        }
      }
      .operation {
        display: flex;
      }
      .purchase_number {
        font-size: 12px;
        color: #fa524c;
        margin-left: 90px;
        padding-top: 10px;
      }
      .sell-out {
        color: #999999;
        line-height: 50px;
      }
    }
  }
}
.text-tag {
  margin-top: 10px;
  .red {
    background: red;
  }
}
</style>

